<template>
  <a-modal title="热门素材" v-model:visible="visible" @cancel="cancelHandle" centered style="width: 680px">
    <div class="container">
      <a-tabs v-model:activeKey="activeTab" @change="changeTabList">
        <a-tab-pane :key="item.id" :tab="item.name" v-for="item in tagList">
          <a-spin :spinning="spinning">
            <div class="popula_materialList" v-if="materialList.length > 0">
              <!-- 每一项 -->
              <div class="list_item" v-for="ele in materialList" :key="ele.id" @click="toggleItem(ele.id)">
                <video :src="ele.material_url" class="video"></video>
                <!-- 遮罩层 -->
                <div class="list-item-mask" :class="{ 'custom-item-active': isSelected(ele.id) }">
                  <div class="mask-checkbox">
                    <a-checkbox class="checkbox" v-if="isSelected(ele.id)"
                      :checked="selectedCustomItems.includes(ele.id)" @change="toggleItem(ele.id)"></a-checkbox>
                  </div>
                  <div class="mask-bottom">
                    <div class="mask-bottom-time">
                      {{ ele.material_duration_text }}
                    </div>
                    <div class="mask-time-collection">
                      <heart-outlined @click.stop="collectThis(ele)" style="margin-right: 5px;"
                        :style="{ color: ele.collect_count > 0 ? '#2878FF' : '#fff' }" />
                      <eye-outlined @click.stop="viewHandle(ele)" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="empty" v-else>
              <a-empty />
            </div>
          </a-spin>
        </a-tab-pane>
      </a-tabs>
    </div>
    <template #footer>
      <div class="footer-btn">
        <div>
          <a-button type="text" size="small">已选择{{ selectedCustomItems.length }}</a-button>
          <a-button type="link" size="small" @click="toggleChecked(true)"
            v-if="selectedCustomItems.length !== materialList.length">全选</a-button>

          <a-button type="link" size="small" @click="toggleChecked(false)"
            v-if="selectedCustomItems.length > 0">全部取消</a-button>
        </div>
        <div>
          <a-button @click="cancelHandle">取消</a-button>
          <a-button type="primary" @click="submitHandle">确定</a-button>
        </div>
      </div>
    </template>
    <!-- 预览视频 -->
    <materialPreview :visible="previewVisible" :materialDetail="currentMaterial" @close="closePreview" />
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  nextTick,
  onMounted,
  ref,
  defineEmits,
} from "vue";
import {
  CaretRightOutlined,
  PauseOutlined,
  CloseOutlined,
  EyeOutlined,
  HeartOutlined
} from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import { useStore } from "vuex";
import _ from "lodash";
import materialPreview from "@/views/shotstack/EditingCenter/modules/sourceMaterial/modules/materialPreview.vue";
export default defineComponent({
  components: {
    CaretRightOutlined,
    materialPreview,
    PauseOutlined,
    CloseOutlined,
    EyeOutlined,
    HeartOutlined
  },

  setup(props, context) {
    const state = reactive({
      visible: false,
      activeTab: 0,
      tagList: {},
      materialList: [], //素材列表
      spinning: false,
      selectedCustomItems: [],
      customItemIsChecked: false,
      previewVisible: false,
      currentMaterial: {},
    });
    const showModal = () => {
      state.selectedCustomItems = [];
      getTagList();
      getVideoList();
      state.visible = true;
    };
    const cancelHandle = () => {
      state.visible = false;
    };

    //   tab切换
    const changeTabList = (e) => {
      console.log(state.activeTab);
      getVideoList();
    };
    // 获取tag标签列表
    const getTagList = () => {
      request
        .get("/work_ai", "/user/shotstack/material/tags", {
          scene_type: "video",
        })
        .then((res) => {
          state.tagList = res.result;
          console.log(state.tagList);
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => { });
    };
    // 获取热门素材列表
    const getVideoList = () => {
      state.spinning = true;
      request
        .get("/work_ai", "/user/shotstack/material/video/list", {
          tag_id: state.activeTab,
        })
        .then((res) => {
          console.log(res.result);
          state.spinning = false;
          state.materialList = res.result;
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          state.spinning = false;
        });
    };
    // 预览视频
    const viewHandle = (info) => {
      console.log(info, 111);
      state.currentMaterial = info;
      state.previewVisible = true;
    };
    //   关闭视频预览
    const closePreview = () => {
      state.previewVisible = false;
    };
    const toggleChecked = (value) => {
      if (value) {
        state.selectedCustomItems = state.materialList.map((item) => item.id);
        state.customItemIsChecked = value;
      } else {
        state.selectedCustomItems = [];
      }
    };
    const toggleItem = (itemId) => {
      if (state.selectedCustomItems.includes(itemId)) {
        state.selectedCustomItems = state.selectedCustomItems.filter(
          (id) => id !== itemId
        );
      } else {
        state.selectedCustomItems.push(itemId);
      }
    };
    const isSelected = (itemId) => {
      return state.selectedCustomItems.includes(itemId);
    };
    // 确定
    const submitHandle = () => {
      const selects = state.materialList.filter((ele) => {
        return state.selectedCustomItems.includes(ele.id);
      });
      context.emit("updateMerial", selects);
      state.visible = false;
    };
    // 收藏
    const collectThis = (ele) => {
      request
        .put("/work_ai", "/user/shotstack/material/collect", {
          material_id: ele.id,
          scene_type: ele.scene_type == "audio" ? "bgm" : ele.scene_type,
          is_collect: ele.collect_count == 0 ? 1 : 0,
        })
        .then((res) => {
          // console.log(res)
          getVideoList()
        });
    };
    return {
      ...toRefs(state),
      showModal,
      cancelHandle,
      getTagList,
      changeTabList,
      toggleChecked,
      isSelected,
      toggleItem,
      submitHandle,
      viewHandle,
      closePreview,
      collectThis
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  min-height: 500px;
}

.popula_materialList {
  // display: flex;
  display: grid;
  grid-template-columns: repeat(4, 1fr); //平分5等份
  max-height: 600px;
  overflow-y: auto;

  // flex-wrap: wrap;
  .list_item {
    min-width: 150px;
    position: relative;
    margin: 5px 5px 0 0;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background: black;

    &:nth-child(4n) {
      margin-right: 0;
    }

    video {
      width: 150px;
      height: 200px;
    }

    // 遮罩层
    .list-item-mask {
      width: 150px;
      position: absolute;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      top: 0;
      left: 0;
      color: #fff;

      // border: 1px solid #fff;
      .mask-checkbox {
        padding-left: 5px;
        padding-top: 5px;
      }

      .mask-bottom {
        padding: 10px 5px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.footer-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active {
  border: 1px solid #fff;
}

.empty {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
